<template>

    <div class="page-content">
        <div class="page-content-head">
            <div>
        </div>

        <div>
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">

                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="名称"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="rule"
                    label="规则"
                    >
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                        <el-button 
                            type="primary" 
                            icon="el-icon-edit" 
                            circle>
                        </el-button>
                        <el-button 
                            type="danger" 
                            icon="el-icon-delete" 
                            circle>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="1000">
            </el-pagination>
        </div>
    </div>

</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        multipleSelection: []
      }
    },
    created(){

        this.$http.post('rule').then((res) =>{
            this.tableData = res.data
        })
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>
